<template>
  <div class="index">
    <!-- 搜索框 -->
    <van-row>
      <van-search placeholder="请输入内容" v-model="value" />
    </van-row>
    <!-- 轮播图 -->
    <div class="swiper">
      <van-swipe :autoplay="5000" indicator-color="#fff">
        <van-swipe-item v-for="(image, index) in SwiperImg" :key="index">
          <img style="max-heigth:376px" :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 中间部分 -->
    <van-row>
      <van-grid :column-num="5">
        <van-grid-item icon="like" text="鲜花" />
        <van-grid-item icon="star" text="永生花" />
        <van-grid-item icon="gem" text="蛋糕" />
        <van-grid-item icon="gift" text="礼品" />
        <van-grid-item icon="service" text="巧克力" />
      </van-grid>
    </van-row>
  </div>
</template>
<script>
export default {
  name: "index",
  name: "swiper",
  data() {
    return {
      value: "",
      SwiperImg: [
        "https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/39343/4/1551/48272/5cbd71f4E329401dc/579b33f530a1402d.jpg!cr_1125x549_0_72!q70.jpg.dpg",
        "https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/34869/14/3703/113972/5cb953c1E4294d8ea/b73c538710f5c462.jpg!cr_1125x549_0_72!q70.jpg.dpg",
        "https://m.360buyimg.com/mobilecms/s750x366_jfs/t1/39343/4/1551/48272/5cbd71f4E329401dc/579b33f530a1402d.jpg!cr_1125x549_0_72!q70.jpg.dpg"
      ]
    };
  },
  components: {},
  methods: {}
};
</script>
<style scoped>
.swiper {
  width: 100%;
  height: 210px;
}
.van-swipe {
  width: 100%;
  height: 100%;
}
img {
  width: 100%;
  height: 210px;
  pointer-events: none;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  color: #fff;
  background: #fff;
}
</style>
